<template>
	<div class="c-wrap">
		<!-- 头部 -->
		<div class="c-head">
			<span> 是否显示：</span
			><el-select v-model="value1" placeholder="请选择">
				<el-option
					v-for="item in options"
					:key="item.value"
					:label="item.label"
					:value="item.value"
				>
				</el-option>
			</el-select>
			<span> 秒杀名称：</span>
			<el-select v-model="value1" placeholder="请选择">
				<el-option
					v-for="item in options"
					:key="item.value"
					:label="item.label"
					:value="item.value"
				>
				</el-option>
			</el-select>
		</div>
		<!-- 点击 -->
		<div class="c-add">
			<el-button class="cbtn" size="medium" type="primary" @click="handBox"
				>添加秒杀配置</el-button
			>
		</div>
		<!-- zhu表单 -->

		<div class="c-form">
			<el-table
				:data="
					tableData.filter(
						(data) =>
							!search || data.name.toLowerCase().includes(search.toLowerCase())
					)
				"
				style="width: 100%"
			>
				<el-table-column label="ID" prop="id"> </el-table-column>
				<el-table-column label="秒杀名称" prop="name"> </el-table-column>
				<el-table-column label="秒杀时段" prop="timer"> </el-table-column>
				<el-table-column label="轮播图" prop="banner">
					<el-image style="width: 50px; height: 50px" :src="imgs[0]"></el-image>
					<el-image style="width: 50px; height: 50px" :src="imgs[1]"></el-image>
				</el-table-column>
				<el-table-column label="状态" prop="about">
					<el-switch active-color="#409eff" inactive-color="#409eff">
					</el-switch>
				</el-table-column>
				<el-table-column label="创建时间" prop="date"> </el-table-column>
				<el-table-column align="left">
					<template #header>
						<el-input
							v-model="search"
							size="mini"
							placeholder="输入关键字搜索"
						/>
					</template>
					<template #default="scope">
						<el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
							>编辑</el-button
						>
						<el-button size="mini">删除</el-button>
						<el-button size="mini">添加秒杀配置</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<!-- 分页 -->
		<div class="c-page">
			<el-pagination
				:page-sizes="[10, 20, 30, 40]"
				:page-size="10"
				layout="total, sizes, prev, pager, next, jumper"
				:total="40"
			>
			</el-pagination>
		</div>
		<!-- 弹框 -->
		<div class="c-dialog" v-if="flag">
			<div class="c-box">
				<div class="cbox-head">
					<span>添加数据</span><span @click="handClose">×</span>
				</div>
				<hr />

				<div class="cbox-form">
					<el-form label-width="80px">
						<el-form-item label="名称" required>
							<el-input v-model="name1"></el-input>
						</el-form-item>
						<el-form-item label="时间规范" required>
							<el-input v-model="name2"></el-input>
						</el-form-item>
				

						<el-form-item label="活动时间">
							<el-col :span="11">
								<el-date-picker
									type="date"
									placeholder="选择日期"
									v-model="form.date1"
									style="width: 100%"
								></el-date-picker>
							</el-col>
							<el-col class="line" :span="2">—</el-col>
							<el-col :span="11">
								<el-time-picker
									placeholder="选择时间"
									v-model="form.date2"
									style="width: 100%"
								></el-time-picker>
							</el-col>
						</el-form-item>

						<el-form-item label="幻灯片" required>
							<el-upload
								action="https://jsonplaceholder.typicode.com/posts/"
								list-type="picture-card"
							>
								<i class="el-icon-plus"></i>
							</el-upload>
							<el-dialog v-model="dialogVisible">
								<img width="100%" :src="dialogImageUrl" alt="" />
							</el-dialog>
						</el-form-item>
						<el-form-item label="状态" required>
							<el-switch
								active-color="#409eff"
								inactive-color="#409eff"
							></el-switch>
						</el-form-item>

						<div class="ma">
							<span id="ma" @click="handCloses">提交</span>
						</div>
					</el-form>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			name1: "",
			name2: "",
			form: {
				data1: "",
				data2: "",
			},
			dialogImageUrl: "",
			dialogVisible: false,
			flag: false,
			value1: "",
			imgs: [
				"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2859170911,1795344974&fm=15&gp=0.jpg",
				"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=700679383,192440200&fm=26&gp=0.jpg",
			],
			options: [
				{
					value: "选项1",
					label: "黄金糕",
				},
				{
					value: "选项2",
					label: "双皮奶",
				},
				{
					value: "选项3",
					label: "蚵仔煎",
				},
				{
					value: "选项4",
					label: "龙须面",
				},
				{
					value: "选项5",
					label: "北京烤鸭",
				},
			],
			value: "fff",
			tableData: [
				{
					id: "04",
					name: "二嫂",
					timer: "17:00 - 21:00",
					banner: "1",
					about: "2",
					date: "2016-05-02 16:45:23",
				},
				{
					id: "07",
					name: "三舅",
					timer: "7:00 - 11:00",
					banner: "1",
					about: "2",
					date: "2016-05-02 16:45:23",
				},
				{
					id: "08",
					name: "四奶",
					timer: "12:00 - 19:00",
					banner: "1",
					about: "2",
					date: "2016-05-02 16:45:23",
				},
			],
			search: "",
		};
	},

	methods: {
		handBox() {
			this.flag = !this.flag;
		},
		handClose() {
			this.flag = !this.flag;
		},
		handCloses() {
			this.flag = false;
		},
	},
};
</script>

<style lang='scss' scoped>
@import "../../assets/css/style.scss";
.kill {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	/* position: relative; */
}
html {
	position: relative;
}
.c-wrap {
	width: 100%;
	height: 450px;
	background: white;
	padding: 20px 20px;
}

.c-form /deep/.el-button {
	color: rgb(64, 158, 255);
}
.c-head {
	width: 100%;
	display: flex;
	align-items: center;
	margin: 10px 0;
	font-weight: bold;
}
.cbtn {
	padding: 5px 10px;
}
.c-page {
	float: right;
	margin-top: 10px;
}
.c-dialog {
	width: 100%;
	height: 100%;
	z-index: 7;
	background: rgba($color: #000000, $alpha: 0.6);
	position: absolute;
	top: 0;
	left: 0px;
}
.el-col-2 {
	width: 8.33333%;
	text-align: center;
}
.c-box {
	background: white;
	width: 700px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 6px;
	padding: 20px;
}
.cbox-head {
	display: flex;
	justify-content: space-between;
	line-height: 40px;
	height: 40px;
	font-weight: bold;
	font-size: 16px;
}

.cbox-form /deep/ .el-upload--picture-card {
	background-color: #fbfdff;
	border: 1px dashed #c0ccda;
	border-radius: 6px;
	box-sizing: border-box;
	width: 50px;
	height: 45px;
	line-height: 50px;
	vertical-align: top;
}
.cbox-form /deep/.el-form-item {
	margin: 10px 0;
}
.ma {
	margin-left: 35px;
}
#ma {
	background: #409eff;
	padding: 3px 6px;
	display: block;
	width: 78px;
	height: 32px;
	border-radius: 3px;
	text-align: center;
	line-height: 27px;
	color: #fff;
}
</style>